<template>
    <div id="firstView">
        <swiper @change="handleChange" indicator-dots autoplay circular>
            <swiper-item>
                <img src="/static/images/timg1.jpg" alt="">
            </swiper-item>
            <swiper-item>
                <img src="/static/images/timg.jpg" alt="">
            </swiper-item>
            <swiper-item>
                <img src="/static/images/3801213fb80e7bec9c0b9bb9252eb9389a506b91.jpg" alt="">
            </swiper-item>
            <swiper-item>
                <img src="/static/images/u=3274003849,3346516669&fm=26&gp=0.jpg" alt="">
            </swiper-item>
        </swiper>
        <button class="btn">开始体验</button>
    </div>
</template>

<script>
export default {
data(){
        return {
            index:0
        }
    },
    methods:{
        handleChange (event) {
            console.log(event)
        }
    }
}
</script>

<style lang="stylus" scoped>
page
 width 100%
 height 100%
 #firstView
  width 100%
  height 100%
  swiper 
   width 100%
   height 100vh
   img 
    width 100%
    height 100%
  .btn
    width 280rpx
    height 80rpx
    text-align center
    line-height 80rpx
    position absolute 
    bottom 20rpx
    left 50%
    margin-left -140rpx
    background-color #c4c4c4
</style>

